<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Shoppe商城-综合网购首选-正品低价、品质保证、配送及时、轻松购物
    </title>
    <link rel="icon" href="static/img/common/favicon.ico" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/goods.css" />
    <script src="jquery/jquery-3.6.0.js"></script>

  </head>
  <body>
  <!-- 顶部模块start -->
  <%@include file="page/common/top.jsp"%>
  <!-- 顶部模块end -->
  <!-- nav 搜索模块start -->
   <%@include file="page/common/search.jsp"%>
    <!-- nav 搜索模块end -->
    <!-- 分类导航 start -->
    <div class="title iconfont">
      <div class="w">
        <ul>
          <li><strong>首页</strong></li>
          <li><em>&#xe616;</em></li>
          <li>全部商品</li>
          <li><em>&#xe616;</em></li>
          <li>分类</li>
        </ul>
      </div>
    </div>
    <div class="classification">
      <div class="w">
        <ul>
          <li><strong>分类</strong></li>
          <li class="classify" onclick="isActive(this)"><em class="active">全部</em></li>
          <li class="classify" onclick="isActive(this)"><em>手机</em></li>
          <li class="classify" onclick="isActive(this)"><em>电视机</em></li>
          <li class="classify" onclick="isActive(this)"><em>空调</em></li>
          <li class="classify" onclick="isActive(this)"><em>洗衣机</em></li>
          <li class="classify" onclick="isActive(this)"><em>保护套</em></li>
          <li class="classify" onclick="isActive(this)"><em>保护膜</em></li>
          <li class="classify" onclick="isActive(this)"><em>充电器</em></li>
          <li class="classify" onclick="isActive(this)"><em>充电宝</em></li>
        </ul>
      </div>
    </div>
    <!-- 分类导航 end -->
    <!-- 商品列表 start -->
    <div class="goods w clearfix">

      <div class="box">
        <div class="all good">
          <ul>
            <!-- 全部 -->
            <c:forEach items="${sessionScope.phones}" var="item">
              <li class="items">
                <a>
                  <img src="${item.imgPath}" alt="" class="img1" />
                </a>
                <p class="name2">${item.name}</p>
                <p class="desc2">${item.describe}</p>
                <p class="price2 iconfont">${item.discountPrice.unscaledValue()==0 ? item.price:item.discountPrice}<del>${item.discountPrice.unscaledValue()==0 ? null:item.price}</del><a class="add-cart" id="phone" phoneId="${item.id}">&#xe735;</a></p>
              </li>
            </c:forEach>
          </ul>
        </div>
        <div class="good iconfont">
          <!-- 手机 -->
          <ul>
            <c:forEach items="${sessionScope.phones}" var="item">
              <c:if test="${item.type eq '手机'}">
                <li class="items">
                  <a>
                    <img src="${item.imgPath}" alt="" class="img1" />
                  </a>
                  <p class="name2">${item.name}</p>
                  <p class="desc2">${item.describe}</p>
                  <p class="price2 iconfont">${item.discountPrice.unscaledValue()==0 ? item.price:item.discountPrice}<del>${item.discountPrice.unscaledValue()==0 ? null:item.price}</del><a class="add-cart" id="phone" phoneId="${item.id}">&#xe735;</a></p>
                </li>
              </c:if>
            </c:forEach>
          </ul>
        </div>
        <div class="good">
          <!-- 电视 -->
          <ul>
            <c:forEach items="${sessionScope.phones}" var="item">
              <c:if test="${item.type eq '电视机'}">
                <li class="items">
                  <a>
                    <img src="${item.imgPath}" alt="" class="img1" />
                  </a>
                  <p class="name2">${item.name}</p>
                  <p class="desc2">${item.describe}</p>
                  <p class="price2 iconfont">${item.discountPrice.unscaledValue()==0 ? item.price:item.discountPrice}<del>${item.discountPrice.unscaledValue()==0 ? null:item.price}</del><a class="add-cart" id="phone" phoneId="${item.id}">&#xe735;</a></p>
                </li>
              </c:if>
            </c:forEach>
          </ul>
          </div>
        <div class="good">
          <!-- 空调 -->
          <ul>
            <c:forEach items="${sessionScope.phones}" var="item">
              <c:if test="${item.type eq '空调'}">
                <li class="items">
                  <a>
                    <img src="${item.imgPath}" alt="" class="img1" />
                  </a>
                  <p class="name2">${item.name}</p>
                  <p class="desc2">${item.describe}</p>
                  <p class="price2 iconfont">${item.discountPrice.unscaledValue()==0 ? item.price:item.discountPrice}<del>${item.discountPrice.unscaledValue()==0 ? null:item.price}</del><a class="add-cart" id="phone" phoneId="${item.id}">&#xe735;</a></p>
                </li>
              </c:if>
            </c:forEach>
          </ul>
        </div>
        <div class="good">
          <!-- 洗衣机 -->
          <ul>
            <c:forEach items="${sessionScope.phones}" var="item">
              <c:if test="${item.type eq '洗衣机'}">
                <li class="items">
                  <a>
                    <img src="${item.imgPath}" alt="" class="img1" />
                  </a>
                  <p class="name2">${item.name}</p>
                  <p class="desc2">${item.describe}</p>
                  <p class="price2 iconfont">${item.discountPrice.unscaledValue()==0 ? item.price:item.discountPrice}<del>${item.discountPrice.unscaledValue()==0 ? null:item.price}</del><a class="add-cart" id="phone" phoneId="${item.id}">&#xe735;</a></p>
                </li>
              </c:if>
            </c:forEach>
          </ul>
        </div>
        <div class="good">
          <!-- 保护套 -->
          <ul>
            <c:forEach items="${sessionScope.phones}" var="item">
              <c:if test="${item.type eq '保护套'}">
                <li class="items">
                  <a>
                    <img src="${item.imgPath}" alt="" class="img1" />
                  </a>
                  <p class="name2">${item.name}</p>
                  <p class="desc2">${item.describe}</p>
                  <p class="price2 iconfont">${item.discountPrice.unscaledValue()==0 ? item.price:item.discountPrice}<del>${item.discountPrice.unscaledValue()==0 ? null:item.price}</del><a class="add-cart" id="phone" phoneId="${item.id}">&#xe735;</a></p>
                </li>
              </c:if>
            </c:forEach>
          </ul>
          </div>
        <div class="good">
          <!-- 保护膜 -->
          <ul>
            <c:forEach items="${sessionScope.phones}" var="item">
              <c:if test="${item.type eq '保护膜'}">
                <li class="items">
                  <a>
                    <img src="${item.imgPath}" alt="" class="img1" />
                  </a>
                  <p class="name2">${item.name}</p>
                  <p class="desc2">${item.describe}</p>
                  <p class="price2 iconfont">${item.discountPrice.unscaledValue()==0 ? item.price:item.discountPrice}<del>${item.discountPrice.unscaledValue()==0 ? null:item.price}</del><a class="add-cart" id="phone" phoneId="${item.id}">&#xe735;</a></p>
                </li>
              </c:if>
          </c:forEach>
          </ul>
        </div>
        <div class="good">
          <!-- 充电器 -->
          <ul>
            <c:forEach items="${sessionScope.phones}" var="item">
              <c:if test="${item.type eq '充电器'}">
                <li class="items">
                  <a>
                    <img src="${item.imgPath}" alt="" class="img1" />
                  </a>
                  <p class="name2">${item.name}</p>
                  <p class="desc2">${item.describe}</p>
                  <p class="price2 iconfont">${item.discountPrice.unscaledValue()==0 ? item.price:item.discountPrice}<del>${item.discountPrice.unscaledValue()==0 ? null:item.price}</del><a class="add-cart" id="phone" phoneId="${item.id}">&#xe735;</a></p>
                </li>
              </c:if>
            </c:forEach>
          </ul>
        </div>
        <div class="good">
          <!-- 充电宝 -->
          <ul>
            <c:forEach items="${sessionScope.phones}" var="item">
              <c:if test="${item.type eq '充电宝'}">
                <li class="items">
                  <a>
                    <img src="${item.imgPath}" alt="" class="img1" />
                  </a>
                  <p class="name2">${item.name}</p>
                  <p class="desc2">${item.describe}</p>
                  <p class="price2 iconfont">${item.discountPrice.unscaledValue()==0 ? item.price:item.discountPrice}<del>${item.discountPrice.unscaledValue()==0 ? null:item.price}</del><a class="add-cart" id="phone" phoneId="${item.id}">&#xe735;</a></p>
                </li>
              </c:if>
            </c:forEach>
          </ul>
        </div>
      </div>
    </div>
    <!-- 商品列表 end -->
  <!-- 页脚开始 -->
  <%@include file="page/common/bottom.jsp"%>
  <!-- 页脚结束 -->
    <script src="js/common.js"></script>
    <script src="js/goods.js"></script>
    <script>
      var cart = document.getElementsByClassName("add-cart");
        for(i=0;i<cart.length;i++){
          cart[i].onclick = function(){
        alert("添加到购物车成功！");}
        }
    </script>
  </body>
</html>
